<style>

</style>


<template>
  <div class="app-container">
    <el-card  class="form-container">
    <el-form
      ref="form"
      :rules="rules"
      :model="queryParams"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="热门城市" prop="cityCode">
        <el-select
          v-model="queryParams.cityCode"
          placeholder="热门城市"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="dict in this.cities"
            :key="dict.cityCode"
            :label="dict.cityName"
            :value="dict.cityCode"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="学历要求" prop="degree">
        <el-select
          v-model="queryParams.degree"
          placeholder="学历"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="dict in dict.type.degree_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="工作经验" prop="experience">
        <el-select
          v-model="queryParams.experience"
          placeholder="请选择工作经验"
          clearable
          style="width: 180px"
        >
          <el-option
            v-for="dict in dict.type.experience_time"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item style="margin-top: 100px">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="doPredictSalary"
        >预测薪资</el-button
        >


        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="resetQuery"
        >
          重置</el-button
        >
      </el-form-item>
    </el-form>
    </el-card>
    <el-container
      v-loading.container.lock="fullscreenLoading"
      style="height: 350px"
      element-loading-text="薪资预测中。。请随便转转或喝口咖啡~~~"

    ></el-container>
  </div>


</template>

<script>
  import {
    searchHotCity
  } from "@/api/common/common";
  import {
    doPredictSalary
  } from "@/api/sysFunction/functions";





  export default {
    name: "predictSalary",
    dicts: ['experience_time', 'degree_level'],
    data() {
      return {
        // 遮罩层
        loading: false,
        fullscreenLoading:false,
        // 选中数组
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 是否显示弹出层
        open: false,
        //是否显示弹出层(分配接口)
        openAuthApi: false,
        menuExpand: false,
        menuNodeAll: false,
        resourceExpand: true,
        resourceNodeAll: false,
        // 资源列表
        cities: [],
        // 查询参数
        queryParams: {

        },

        // 表单参数
        form: {},

        // 表单校验
        rules: {
          cityCode: [
            { required: true, message: "关键词不能为空", trigger: "blur" },
          ],
          degree: [
            { required: true, message: "关键词不能为空", trigger: "blur" },
          ],
          experience: [
            { required: true, message: "关键词不能为空", trigger: "blur" },
          ],


        },
      };
    },
    created() {
    },
    mounted() {
      this.searchHotCity();
    },
    methods: {
      searchHotCity(){
        searchHotCity().then(response => {
          this.cities = response.data;
        });
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 取消按钮（分配接口）
      cancelApiResource() {
        this.openAuthApi = false;
        this.reset();
      },
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([]);
        }
        (this.menuExpand = false),
          (this.menuNodeAll = false),
          (this.resourceExpand = true),
          (this.resourceNodeAll = false),
          (this.queryParams={});
        this.resetForm("form");
      },


      doPredictSalary() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // 发送表单数据
            this.fullscreenLoading = true;
            //加5s倒计时
            setTimeout(() => {
              doPredictSalary(this.queryParams).then(
                (response) => {
                  this.$msgbox({
                      message: '您好，您的薪资预测为' + response.data+'元/月',
                      title: "预测结果",
                    }
                    )
                  this.fullscreenLoading = false;
                },
              );
            }, 3000);

          }
        });
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("form");
        // this.handleQuery();
      },

    }};
</script>

<style scoped>
  .form-container {
    position: absolute;
    height: 400px;
    align-self: center;
    margin-left: 300px;
    width: 40%;
  }
  .el-form-item {
    display: block; /* 确保每个 el-form-item 占据一整行 */
    /* 水平居中 */
    text-align: center; /* 文本居中，这会影响标签（label）的对齐 */
    width: 100%; /* 或者设置一个具体的宽度，例如 width: 300px; */
    margin: 10px auto;
    /* 其他你需要的样式 */
  }

</style>
